<template>
  <div>
    <Mtitle MtitleTxt="设置密码" class="title" />
    <van-field
      v-model="value"
      clearable
      left-icon="bag-o"
      placeholder="输入密码"
    />
    <van-field
      v-model="value2"
      clearable
      left-icon="bag-o"
      placeholder="确认密码"
    />
    <p>密码长度8~32位，须包含数字、字母、符号至少2种或以上元素</p>
    <p class="err" v-text="error"></p>
    <button @click="upPwd" :class="{ btnClick: isBtn }">完成</button>
  </div>
</template>

<script>
import Mtitle from "../../../components/my/Mtitle.vue";
import { mapActions } from "vuex";

export default {
  components: {
    Mtitle,
  },
  data() {
    return {
      //密码
      value: "",
      //确认密码
      value2: "",
      //错误提示
      error: "",
    };
  },
  computed: {
    isBtn() {
      return !!this.value && !!this.value2;
    },
  },
  methods: {
    ...mapActions("li", ["upPassward"]),

    upPwd() {
      //正则 8-32位 数字，字母。符号至少两种
      let reg = /^(?![\d]+$)(?![a-zA-Z]+$)(?![^a-zA-Z0-9]+$)[\S]{8,32}$/;
      if (reg.test(this.value)) {
        this.error = "";
        if (this.value === this.value2) {
          this.error = "";
          this.upPassward(this.value);
        } else {
          this.error = "密码不一致";
        }
      } else {
        this.error = "密码格式不正确";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.title {
  margin-bottom: 100px;
}
.van-field {
  width: 620px;
  height: 68px;
  margin-left: 70px;
  font-size: 28px;
  margin-bottom: 20px;
}
p {
  width: 620px;
  height: 68px;
  color: rgba(125, 125, 125, 100);
  font-size: 24px;
  margin-left: 70px;
}
button {
  width: 620px;
  height: 90px;
  line-height: 24px;
  border-radius: 50px;
  display: block;
  background-color: rgba(190, 190, 190, 100);
  color: white;
  font-size: 28px;
  text-align: center;
  font-family: Arial;
  border: 2px solid rgba(255, 0, 0, 0);
  margin: 70px auto 0;
}
.btnClick {
  background-color: #24b92e;
}
.err {
  color: red;
}
</style>